/* <!-- 标题 --> */
.title {
    width: 100%;
    height: 83px;
    /* 阴影出现在下方 */
    box-shadow: 0 4px 10px rgb(0 0 0 / 4%);
    /* 模糊后面 */
    backdrop-filter: blur(20px);
    position: fixed;
    z-index: 99;
    background-color: rgba(255, 255, 255, .5);
}

/* <!-- 头部版心 --> */
.topbx {
    width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* <!-- 搜狗输入法logo --> */
.titleimg {
    width: 500px;
    height: 80px;
    background: url('../img/logo.40eda95a.svg') no-repeat;
    background-size: contain;
    cursor: pointer;
}

/* 文字box */
.titletext {
    display: flex;
    align-items: center;
    position: relative;

}

/* 头部 产品 开放平台*/
.titlenm {
    text-decoration: none;
    color: black;
    display: inline-block;
    height: 80px;
    line-height: 80px;
    padding: 0 40px;
    position: relative;
}

/* 产品的box */
.navbox1 {
    position: relative;
}

/* 显示相对应的内容 */
.navbox1:hover .titlenav {
    display: block;
    opacity: 1;
}

.navbox2 {
    position: relative;
}

.navbox2:hover .skinnav {
    display: block;
    opacity: 1;
}

/* 移到字体上时变色 */
.titlenm:hover {
    color: #ff6700;
}


/* <!-- 产品对应的东西 --> */
.titlenav {
    background-color: white;
    position: absolute;
    width: 150px;
    top: 83px;
    font-size: 16px;
    opacity: 0;
    display: none;
    z-index: 10;
}

.titlenav a {
    padding: 16px 23px;
    text-align: center;
}

.titlenav a:hover {
    color: #ff6700;
    background-color: #fff;
}

/* 移到产品时展示 */
.npmc:hover .titlenav {
    opacity: 1;
}

/* <!-- 开放平台对应的东西 --> */
.skinnav {
    background-color: white;
    position: absolute;
    width: 180px;
    top: 83px;
    font-size: 16px;
    opacity: 0;
    display: none;
    text-align: center;
}

.skinnav a {
    padding: 16px 23px;
}

.skinnav a:hover {
    color: #ff6700;
    background-color: #fff;

}

/* 移到开放平台时展示 */
.nmkfpt:hover .skinnav {
    opacity: 1;
}

/* 黑色小三角形 */
.nmsp {
    border-top: 5px solid #333;
    border-right: 5px solid transparent;
    border-bottom: 0;
    border-left: 5px solid transparent;
    content: "";
    position: absolute;
    top: 37px;
    margin-left: 4px;

}

/* 小三角形变色 */
.titlenm:hover .nmsp {
    border-top: 0;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #ff6700;
    border-left: 5px solid transparent;
    content: "";
    position: absolute;
    top: 37px;
    margin-left: 4px;
}

/* 联系合作 */
.titlecallme {
    display: inline-block;
    text-decoration: none;
    color: #ff6700;
    border: 1px solid #ff6933;
    font-size: 20px;
    border-radius: 4px;
    padding: 7px 40px;
    cursor: pointer;
    margin-left: 70px;

}

/* 移到联系合作上时背景变色 */
.titlecallme:hover {
    background-color: rgba(242, 121, 46, 0.362);
}

/* <!-- 头部轮播图 --> */
.topswiper {
    height: 865px;
    padding-top: 80px;
    /* 渐变 */
    background: linear-gradient(250.32deg, #e0f2ff 30.39%, #dbeafc 56.8%, #fff8f4 82.82%) no-repeat;
    background-position: top;

}

/* <!-- 轮播图版心 --> */
.swiperbx {
    width: 1200px;
    height: 100%;
    margin: auto;
    background: url('../img/vector.f77b5c2b.svg') no-repeat;
    background-position: top;
    background-size: auto 96%;
}

/* 轮播图 */
.swiperban {
    text-align: center;
    margin: auto;
    height: 560px;
    position: relative;
}

.titletop {
    text-align: center;
    margin: auto;
    width: 1200px;
    height: 100%;
}

.titletop h1 {
    font-size: 50px;
    font-weight: 500;
    margin-top: 95px;
}

.yi {
    color: #ff6700;
    position: relative;
    top: -3px;
    left: 1px;
    font-weight: 300;
    opacity: 0.8;
}

/* 标题后面那个杠的动画 */
@keyframes fade-in-out {
    0% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

.swiper-fade-in-out {
    /* 动画名字 */
    animation-name: fade-in-out;
    /* 动画时长 */
    animation-duration: 1.5s;
    /* 反复播放 */
    animation-iteration-count: infinite;
    /* 指定切换效果的速度 */
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 左边橙色 */
.btn1 {
    display: inline-block;
    border-radius: 4px;
    width: 50.52px;
    height: 31.91px;
    background-image: linear-gradient(119.68deg, #ff9d66 10.73%, #ff7c53 91.62%);
    position: absolute;
    top: 185px;
    left: 255px;
}

/* 要定义的动画 */
@keyframes float-left {
    0% {
        /* 在垂直方向移动，角度是-23.63deg */
        transform: translateY(0) rotate(-23.63deg);
    }

    50% {
        transform: translateY(50%) rotate(-23.63deg);
    }

    100% {
        transform: translateY(0) rotate(-23.63deg);
    }
}

.btn-float-left {
    /* 上面命名的名字 */
    animation-name: float-left;
    /* 动画执行一共2秒 */
    animation-duration: 2s;
    /* 反复执行 */
    animation-iteration-count: infinite;
}

/* 左边白色 */
.btn2 {
    display: inline-block;
    border-radius: 4px;
    width: 238.2px;
    height: 48.12px;
    background-image: linear-gradient(105.44deg, hsla(0, 0%, 100%, .87) 26.79%, hsla(0, 0%, 100%, 0) 72.99%);
    position: absolute;
    top: 113px;
    left: 255px;

}

/* <!-- 输入法 --> */
.long1 {
    width: 296px;
    height: 207.5px;
    display: inline-block;
    background: url('../img/sogou-1.ee0c040c.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 90px;
    left: 390px;
}

/* 蓝色框 */
.btn3 {
    display: inline-block;
    width: 237.4px;
    height: 117.09px;
    background: linear-gradient(288.39deg, #72c7ff 17.89%, rgba(116, 200, 255, 0) 101.74%);
    border-radius: 16px;
    /* 阴影 */
    box-shadow: 20.8523px 42.5067px 44.1107px rgb(116 188 255 / 40%),
        /* 向内 inset */
        inset -2.406px -2.406px 1.604px rgb(0 102 255 / 25%),
        inset 2.406px 2.406px 1.604px rgb(233 248 255 / 77%);
    backdrop-filter: blur(8px);
    position: absolute;
    top: 200px;
    right: 380px;
}

/* 动画 */
@keyframes float-up {
    0% {
        /* 在垂直方向移动*/
        transform: translateY(0);
    }

    50% {
        transform: translateY(5%);
    }

    100% {
        transform: translateY(0);
    }
}

.btn-float-up {
    /* 上面命名的名字 */
    animation-name: float-up;
    /* 动画执行一共2秒 */
    animation-duration: 2.5s;
    /* 反复执行 */
    animation-iteration-count: infinite;
}

/* <!-- 右边橙色 --> */
.btn4 {
    width: 230.25px;
    height: 100.06px;
    background: url('../img/bubble2.ed0164a6.svg') no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    position: absolute;
    top: 130px;
    right: 185px;
}

/* <!-- 右边蓝色 --> */
.btn5 {
    width: 252.27px;
    height: 125.4px;
    background: url('../img/bubble1.ac1598fd.svg') no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    position: absolute;
    top: 125px;
    right: 270px;

}

/* <!-- 打错的拼音 --> */
.btn6 {
    width: 370px;
    height: 81px;
    background: url('../img/pinyin.aa9a403a.svg') no-repeat;
    background-size: 100% auto;
    display: inline-block;
    position: absolute;
    top: 240px;
    right: 415px;
}

/* <!-- 打错 --> */
.btn7 {
    width: 580px;
    height: 220px;
    background: url('../img/dacuo.ed289772.svg') no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    position: absolute;
    top: 232px;
    right: 285px;
}

/* 箭头 */
.btn8 {
    width: 204px;
    height: 180.39px;
    background: url('../img/arrow-1.13ec79a1.png') no-repeat;
    background-size: 100% auto;
    display: inline-block;
    position: absolute;
    top: 320px;
    left: 350px;
}

/* <!-- 右下蓝 --> */
.btn9 {
    display: inline-block;
    border-radius: 4px;
    width: 33.89px;
    height: 22.91px;
    background: linear-gradient(119.68deg, #4690ff 10.73%, #247cff 91.62%);
    position: absolute;
    top: 370px;
    right: 335px;
    opacity: 0.77;
}

/* <!-- 右下白 --> */
.btn10 {
    display: inline-block;
    border-radius: 4px;
    width: 141px;
    height: 28.49px;
    background: linear-gradient(105.44deg, rgba(252, 253, 255, .52) 26.79%, hsla(0, 0%, 100%, 0) 72.99%);
    position: absolute;
    top: 345px;
    right: 215px;
}

/* 指示点 */
.dianbox {
    position: relative;
    bottom: 60px;

}
/* 圆点 */
.circle {
    border: 4px solid gray;
    background-color: gray;
    margin-right: 6px;
    display: inline-block;
    border-radius: 50%;
    opacity: 0.4;
}
/* 长条 */
.circle-active {
    display: inline-block;
    width: 30px;
    border: 4px solid #ff6700;
    background-color: #ff6700;
    opacity: 1;
    border-radius: 0%;
}

.circle-active::before {
    border: 4px solid #ff6700;
    position: absolute;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    top: 10px;
    left: 535px;
    content: "";
}

.circle-active::after {
    border: 4px solid #ff6700;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    position: absolute;
    top: 10px;
    left: 575px;
    content: "";

}

/* <!-- 白框外部box --> */
.swiperup {
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* 高度塌陷 */
.swiperup::after {
    content: "";
    clear: both;
    display: block;
}

/* <!-- 白框 --> */
.upbox {
    width: 130px;
    height: 88px;
    background-color: #ffffff;
    display: flex;
    flex-flow: column;
    padding: 20px 0;
    border-radius: 6px;
    float: left;
    margin: 0 20px;
    cursor: pointer;
}

.upbox:hover {
    box-shadow: 0 0 30px rgb(0 0 0 / 10%);
}

/* <!-- 小图标 --> */
.upimg {
    width: 40px;
    height: 40px;
    background: url('../img/Windows.53395a71.svg') no-repeat;
    background-size: 95% auto;
    margin: auto;
}

/* 文字 */
.uptext {
    text-align: center;
    font-size: 14px;
    color: #222;
}

/* macos白框内的图片 */
.ui {
    background: url('../img/appStore.993752e2.svg') no-repeat;
}

/* ios和android白框 */
.upbox3 {
    position: relative;
    background-color: #ffffff;
    width: 130px;
    height: 88px;
    padding: 21px 0;
    border-radius: 6px;
    float: left;
    margin: 0 20px;
    cursor: pointer;
}

.upbox3:hover {
    box-shadow: 0 0 30px rgb(0 0 0 / 10%);
}

/* 第一个模块 */
.upbox3-1 {
    width: 130px;
    height: 88px;
    display: flex;
    flex-flow: column;
    position: absolute;
    transition: all 0.3s;
}

/* ios内的图片 */
.ui2 {
    background: url('../img/apple.ee2e81ce.svg') no-repeat center;
    background-size: 80% auto;
}

/* android框内的图片 */
.ui3 {
    background: url('../img/Android.5344ba27.svg') no-repeat;
}

/* 头上的小二维码 */
.small {
    position: absolute;
    top: -10%;
    right: 10%;
    width: 17px;
    height: 17px;
    background-image: url('../img/qr.5c5a41b1.svg');
    background-repeat: no-repeat;
}

/* 扫码下载模块 */
.Qrdown {
    width: 130px;
    text-align: center;
    position: absolute;
    top: 10px;
    opacity: 0;
    transition: all 0.3s;
}

.Qrdown img {
    width: 90px;
}

.Qrdown p {
    text-align: center;
    font-size: 14px;
}

/* 移到iOS和android白框时第一模块隐藏 */
.upbox3:hover .upbox3-1 {
    opacity: 0;
}

/* 移到iOS和android白框时扫码下载模块隐藏 */
.upbox3:hover .Qrdown {
    opacity: 1;
}

/* Linux 个人版框内的图片 */
.ui4 {
    background: url('../img/Linux.d685e5e8.svg') no-repeat;
}

/* <!-- 更多下载对应的东西 --> */
.morenav {
    background: rgba(255, 255, 255, .6);
    position: absolute;
    top: 136px;
    font-size: 16px;
    opacity: 0;
    display: none;
    text-align: center;
    width: 150px;
}

/* 更多的 */
.spanwhite {
    position: absolute;
    border-top: 0;
    content: "";
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
    border-left: 5px solid transparent;
    top: -5px;
    right: 67px;
}

/* 文字 */
.morenav a {
    padding: 18px 20px;
}

.morenav a:hover {
    color: #ff6700;
    background-color: #fff;
}

/* 更多下载框内的图片 */
.ui5 {
    background: url('../img/more.e37283aa.svg') no-repeat;
}

/* 移动到白框内时显示 */
.upbox:hover .ui-1:hover {
    width: 40px;
    height: 40px;
    background-size: 95% auto;
    margin: auto;
    transition: all 0.3s;
    background: url('../img/Down.0691e8a3.svg') no-repeat;
}

.up6 {
    position: relative;
}

.up6:hover .morenav {
    opacity: 1;
    display: block;
}

.up6:hover .spanwhite {
    opacity: 1;
}